<template>
  <div id="app">
    <!-- 头部 -->
    <div style="height: 50px; line-height: 50px; border-bottom: 1px solid #cccccc; display: flex;">
      <div style="width: 200px; padding-left: 30px; font-weight: bold; color: cornflowerblue;">图书管理系统</div>
      <div style="flex: 1;"></div>
      <div style="width: 100px;">
        <el-dropdown>
          <span class="el-dropdown-link">
            {{ username }}
            <el-icon class="el-icon--right">
              <arrow-down />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <!-- 侧边栏 -->
    <div style="display: flex;">
      <el-menu
          style="width: 200px; min-height: calc(100vh - 50px);"
          :default-active="$route.path"
          router
          class="el-menu-vertical-demo"
      >
        <el-menu-item index="/home">
          <span>首页</span>
        </el-menu-item>
        <el-sub-menu index="1">
          <template #title>
            <span>图书管理</span>
          </template>
          <el-menu-item index="/book">图书列表</el-menu-item>
          <el-menu-item index="/addBook" v-if="isAdmin">图书入库</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/borrow">
          <span>借阅信息</span>
        </el-menu-item>
        <el-sub-menu index="2" v-if="isAdmin">
          <template #title>
            <span>会员管理</span>
          </template>
          <el-menu-item index="/user">会员列表</el-menu-item>
          <el-menu-item index="/addUser">会员添加</el-menu-item>
        </el-sub-menu>
      </el-menu>
      <!-- 内容区域 -->
      <div style="flex: 1; padding: 20px;">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Layout',
  data() {
    return {
      username: '',
      isAdmin: false
    };
  },
  created() {
    this.username = localStorage.getItem('username');
    const loginId = localStorage.getItem('loginId');
    this.isAdmin = (loginId === 'admin');
  },
  methods: {
    logout() {
      localStorage.removeItem('loginId');
      localStorage.removeItem('username');
      localStorage.removeItem('isAdmin');
      this.$router.push('/login');
    }
  }
};
</script>

<style scoped>
/* 全局样式 */
</style>